
<template>
    <div class="index">
        <div class="slide">
            <Carousel autoplay  loop radius-dot arrow="never">
                <CarouselItem>
                    <div class="carouse carouse1"></div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carouse carouse2">2</div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carouse carouse3">3</div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carouse carouse4">4</div>
                </CarouselItem>
            </Carousel>
            <div class="z-99 clearfix">
                <div class="text-l fl">
                    <h1>共享经济&nbsp;分享链接&nbsp;持续收益</h1>
                    <h2>集分卡共享合作平台</h2>
                    <p> <nobr>SHARING AND COOPERATION PLATFORM OF SET CARD</nobr> </p>
                    <button>一起了解更多</button>
                </div>
                <div class="icons-r fl">
                    <ul>
                        <li>
                            <div class="icon-box" @mouseover="isApple=true" @mouseout="isApple=false">
                                <img src="../assets/index/apple.png" alt="" class="animated" :class="{'flip': isApple}" >
                            </div>
                            <p>App store</p>
                        </li>
                        <li>
                            <div class="icon-box" @mouseover="isAndroid=true" @mouseout="isAndroid=false">
                                <img src="../assets/index/android.png" alt="" class="animated" :class="{'flip': isAndroid}">
                            </div>
                            <p>Android</p>
                        </li>
                        <li >
                            <div class="icon-box" @mouseover="isPC=true" @mouseout="isPC=false">
                                <img src="../assets/index/windows.png" alt="" class="animated" :class="{'flip': isPC}">
                            </div>
                            <p>电脑版</p>
                        </li>
                        <li>
                            <div class="icon-box" @mouseover="isCode=true" @mouseout="isCode=false">
                                <img src="../assets/index/code.png" alt="" class="animated" :class="{'flip': isCode}">
                            </div>
                            <p>二维码下载</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="icons-r m750">
            <ul class="">
                <li class="">
                    <div class="icon-box" @mouseover="isApple=true" @mouseout="isApple=false">
                        <img src="../assets/index/apple.png" alt="" class="animated" :class="{'flip': isApple}" >
                    </div>
                    <p>App store</p>
                </li>
                <li class="">
                    <div class="icon-box" @mouseover="isAndroid=true" @mouseout="isAndroid=false">
                        <img src="../assets/index/android.png" alt="" class="animated" :class="{'flip': isAndroid}">
                    </div>
                    <p>Android</p>
                </li>
                <li class="">
                    <div class="icon-box" @mouseover="isPC=true" @mouseout="isPC=false">
                        <img src="../assets/index/windows.png" alt="" class="animated" :class="{'flip': isPC}">
                    </div>
                    <p>电脑版</p>
                </li>
                <li class="">
                    <div class="icon-box" @mouseover="isCode=true" @mouseout="isCode=false">
                        <img src="../assets/index/code.png" alt="" class="animated" :class="{'flip': isCode}">
                    </div>
                    <p>二维码下载</p>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="layer1 clearfix">
                <div class="carousel-box fr">
                    <div class="read-more">READ MORE</div>
                    <Carousel autoplay  loop v-model="value1" dots="none">
                        <CarouselItem>
                            <div class="s-carouse s-carouse1">
                                <img src="../assets/index/card-slide1.png" alt="">
                            </div>
                        </CarouselItem>
                        <CarouselItem>
                            <div class="s-carouse s-carouse2">
                                <img src="../assets/index/card-slide2.png" alt="">
                            </div>
                        </CarouselItem>
                        <CarouselItem>
                            <div class="s-carouse s-carouse3">
                                <img src="../assets/index/card-slide3.png" alt="">
                            </div>
                        </CarouselItem>
                        <CarouselItem>
                            <div class="s-carouse s-carouse4">
                                <img src="../assets/index/card-slide4.png" alt="">
                            </div>
                        </CarouselItem>
                    </Carousel>
                </div>
                <div class="about-card">
                    <section>
                        <h1><img src="../assets/index/gift-card.png" alt=""></h1>
                        <p>集分卡更是一种生活的方式共享经济, 分享链接 ,持续收益送礼
                            不用包红包，一卡在手万事无忧,集分卡更是一种生活的方式共享经济
                            分享链接 持续收益集分卡更是一种生活的方式,共享经济 分享链接
                            持续收益,集分卡更是一种生活的方式,共享经济 ,分享链接 .集分卡
                            更是一种生活的方式共享经济 分享链接 持续收益持续收益.
                        </p>
                    </section>
                </div>
            </div>
            <div class="layer2 i-info">
                <img src="../assets/index/title.png" alt="">
            </div>
            <div class="layer3 clearfix">
                <div class="fl">
                    <dl>
                        <dt>
                            <div class="icon-box">
                                <img src="../assets/index/bill.png" alt="">
                            </div>
                            <b>充话费</b>
                            <p>支持、移动、联通、电信 <br>
                                话费充值业务</p>
                        </dt>
                        <dt>
                            <div class="icon-box">
                                <img src="../assets/index/flow.png">
                            </div>
                            <b>充流量</b>
                            <p>支持、移动、联通、电信 <br>
                                流量充值业务</p>
                        </dt>
                        <dt>
                            <div class="icon-box">
                                <img src="../assets/index/fuel.png">
                            </div>
                            <b>充油卡</b>
                            <p>支持、移动、联通、电信<br>
                                油卡充值业务</p>
                        </dt>
                        <dt>
                            <div class="icon-box">
                                <img src="../assets/index/game1.png">
                            </div>
                            <b>充游戏</b>
                            <p>支持、腾讯、网易<br>
                                游戏充值业务</p>
                        </dt>
                    </dl>
                </div>
                <div class="fr">
                    <section>
                        <h2><span class="headcolor">便捷生活</span>，便捷充值缴费</h2>
                        <p>公司将以“精益求精，一丝不苟”的思想，“一如既往，开拓创新，以诚创新高” <br>

                            的企业经营理念，以人为本，追求卓越，敬业报国，奉献社会” <br>

                            企业宗旨，以长远可持续发展的战略思想， <br>

                            热忱欢迎全国各地的朋友进行技术交 <br>

                            流与合作，与您共创美好未来。</p>
                        <button>+MORE</button>
                    </section>
                </div>
            </div>
            <div class="layer4">
                <img src="../assets/index/share-economy.png" alt="">
            </div>
            <div class="layer5">
                <dl>
                    <dt>
                        <div class="circle circle1">
                            <img src="../assets/index/item.png" alt="">
                        </div>
                        <b>兑换商品</b>
                        <p>集分兑换商品</p>
                    </dt>
                    <dt>
                        <div class="circle circle2">
                            <img src="../assets/index/share.png">
                        </div>
                        <b>共享佣金</b>
                        <p>和邀请好友共享收益</p>
                    </dt>
                    <dt>
                        <div class="circle circle3">
                            <img src="../assets/index/benefit.png">
                        </div>
                        <b>赚取收益</b>
                        <p>和邀请好友赚取收益</p>
                    </dt>
                    <dt>
                        <div class="circle circle4">
                            <img src="../assets/index/game.png">
                        </div>
                        <b>畅玩游戏</b>
                        <p>和邀请好友畅玩游戏</p>
                    </dt>
                </dl>
            </div>
            <div class="layer6"></div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value2: 0,
                value1: 0,
                isApple:false,
                isAndroid:false,
                isPC:false,
                isCode:false,
            }
        },
    }
</script>
<style scoped >
    .ivu-carousel-arrow{border-radius: 0;}
</style>
